<template>
    <div class="home-container">
        <Button type="primary" @click="add">添加用户</Button>
        <div class="home-content">
            <Table border :columns="columns12" :data="data6">
                <!-- <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template> -->
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">编辑</Button>
                    <Button type="error" size="small" @click="remove(row)">删除</Button>
                </template>
            </Table>
            <Modal v-model="modal1" :title="title" @on-ok="ok" @on-cancel="cancel">
                <Form ref="userInfoForm" :model="userInfoForm" label-position="left" :label-width="100">
                    <FormItem label="用户名">
                        <Input v-model="userInfoForm.username"></Input>
                    </FormItem>
                    <FormItem label="密码">
                        <Input v-model="userInfoForm.password"></Input>
                    </FormItem>
                    <FormItem label="手机号">
                        <Input v-model="userInfoForm.phone"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <!-- <Card style="width: 320px">
                <div style="text-align: center">
                    <Form :model="userInfoForm" label-position="left" :label-width="100">
                        <FormItem label="用户名">
                            <Input v-model="userInfoForm.ygg_userName"></Input>
                        </FormItem>
                        <FormItem label="性别">
                            <RadioGroup v-model="userInfoForm.ygg_gender">
                                <Radio label="male">Male</Radio>
                                <Radio label="female">Female</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="描述">
                            <Input
                                v-model="userInfoForm.ygg_desc"
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 5 }"
                                placeholder="Enter something..."
                            ></Input>
                        </FormItem>
                    </Form>
                    <Button type="primary" @click="amendInfo">修改</Button>
                </div>
            </Card> -->
        </div>
    </div>
</template>

<script>
import { fetchUserData, getUserInfo, amendUserInfo, removeUserInfo, addUserInfo } from '@/api'
import { omit } from 'lodash/fp'
const defaultData = {
    userName: '',
    password: '',
    phone: '',
}

export default {
    name: 'me',
    data() {
        return {
            modal1: false,
            mode: 'add',
            userInfoForm: {
                userName: '',
                password: '',
                phone: '',
            },
            userInfo: '',
            columns12: [
                {
                    title: 'ID',
                    key: 'id',
                },
                {
                    title: '用户名',
                    key: 'username',
                },
                {
                    title: '密码',
                    key: 'password',
                },
                {
                    title: '手机号',
                    key: 'phone',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                },
            ],
            data6: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                },
            ],
        }
    },
    methods: {
        getUserData() {
            fetchUserData().then((res) => {
                this.userInfo = JSON.stringify(res, null, 4)
            })
        },
        cancel() {
            this.userInfoForm = defaultData
        },
        ok() {
            // this.$refs['userInfoForm'].resetFields()
            // 修改数据
            if (this.mode === 'add') {
                addUserInfo(this.userInfoForm).then(() => {
                    this.$Message.success('添加成功!')
                    this.getInfo()
                })
            } else {
                amendUserInfo(this.userInfoForm.id, this.userInfoForm).then((res) => {
                    this.$Message.success('修改成功!')
                    this.getInfo()
                })
            }

            this.userInfoForm = defaultData
        },
        show(row) {
            this.mode = 'edit'
            this.userInfoForm = { ...row }
            this.modal1 = true
        },
        remove(row) {
            // this.data6.splice(index, 1)
            removeUserInfo(row.id).then(() => {
                this.$Message.success('删除成功')
            })
            this.getInfo()
        },
        getInfo() {
            // this.userInfoForm.ygg_userName = localStorage.getItem('userName')
            getUserInfo().then((res) => {
                this.data6 = res
                // this.userInfoForm = omit('ygg_pwd')(res)
            })
        },
        amendInfo() {
            console.log(this.userInfoForm)
            amendUserInfo(this.userInfoForm).then((res) => {
                this.$Message.success('修改成功!')
            })
        },
        add() {
            this.modal1 = true
            this.mode = 'add'
        },
    },
    mounted() {
        this.getInfo()
    },
    computed: {
        title() {
            return this.mode === 'add' ? '添加' : '编辑'
        },
    },
}
</script>

<style scoped>
.home-container {
    padding: 10px;
    padding-top: 5px;
}
.home-content {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
</style>
